<template>
    <div class="wrapper">
        <div class="loginWrap">
            <h1 class="title">点餐统计</h1>
            <el-form :model="sendFormData" :rules="rules" ref="validateLoginForm">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" @keyup.enter.native="handleLogin" v-model="sendFormData.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input show-password prefix-icon="el-icon-key" @keyup.enter.native="handleLogin" type="password" v-model="sendFormData.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :type="isReady?'primary':'info'" :loading="apiLoading" @click="handleLogin">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import {login} from '@/api/user'
import {mapGetters} from "vuex";
import flatten from 'lodash/flatten'
import  {resetRouter} from "@/router";
export default {
    name: "login",
    computed:{
        ...mapGetters([
            'routerMap'
        ]),
        isReady(){
            return this.sendFormData.username && this.sendFormData.password
        }
    },
    data(){
        return {
            sendFormData: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required:true, trigger: 'blur',min:2 }
                ],
                password: [
                    { required:true,  trigger: 'blur',min:6 }
                ]
            }
        }
    },
    created() {
        const code=this.$route.params.code
        if(code){
            this.sendFormData.code=code
        }
    },
    methods:{
        handleLogin(){
            this.$refs.validateLoginForm.validate((valid) => {
                if (valid) {
                    login(this.sendFormData).then(res=>{
                        const result= res.data
                        this.$store.commit('user/SET_USER_INFO',result)
                        this.$message.success(res.msg)
                        const asyncMenu=result.asyncMenu
                        this.$router.$asyncRouter.formatRoutes(asyncMenu)
                        const menuMap={};
                        Object.values(asyncMenu).map(item=>{
                            if(!item.meta.hide){
                                menuMap[item.path]=item.meta.title
                            }
                        })
                        if(result.themeImg){
                            this.$store.commit('user/SET_THEME_BG',result.themeImg)
                        }
                        this.$store.commit('user/SET_ROUTER_MAP',menuMap)
                        this.$store.commit('user/SET_AUTH_LIST',result.authList)
                        this.$store.commit('user/SET_HIDE_MENUS',result.hideOrderMenus)
                        this.$store.commit('user/SET_STAR_MENUS',result.starOrderMenus)
                        setTimeout(()=>{
                            window.location.replace('/order')
                            // this.$router.push('/order')
                        },1500)
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
    .wrapper {
        overflow: hidden;
        .loginWrap {
            text-align: center;
            width: 500px;
            margin: 25vh auto 0;
            .title {
                font-weight: 200;
                font-size:30px;
            }
            .el-form {
                width:100%;
            }
            .el-button {
                width:100%;
            }
        }
    }
</style>
